<template>
    <!-- 消防站管理 -->
    <div>
        <el-row class="overview-wrap" :gutter="40">
            <el-col :span="24">
                <div class="item-wrap">
                    <p class="item-value color-4">{{ total }}</p>
                    <p class="item-title">消防站总数</p>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
            <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="请输入消防站名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-search-btn" type="primary" @click="getTableData(1)">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="more-btns">
                <el-button type="primary" @click="addFireStation">新增</el-button>
            </div>
        </el-row>
        <el-table
            v-loading="loading"
            ref="multioleUnitsTableList"
            :data="tableData"
            style="width: 100%">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column label="图片" prop="orgName" width="100">
                <template v-if="scope.row.url != ''" slot-scope="scope">
                    <img :src="scope.row.url.split(',')[0]" width="50px" height="50px" @click="$imgPreview" :data-imgpreview="scope.row.url">
                </template>
            </el-table-column>
            <el-table-column label="消防站名称" prop="name"></el-table-column>
            <el-table-column label="位置" prop="location"></el-table-column>
            <el-table-column label="经度" prop="lon"></el-table-column>
            <el-table-column label="纬度" prop="lat"></el-table-column>
            <el-table-column label="联系电话" prop="tel"></el-table-column>
            <el-table-column label="消防员数" prop="personCount"></el-table-column>
            <el-table-column label="消防车数" prop="carCount"></el-table-column>
            <el-table-column label="创建日期" prop="createTime"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="editFireStation(scope.row)" type="text" size="small">编辑</el-button>
                    <span class="dividing-line">|</span>
                    <el-button @click="deleteFireStation(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <!-- 新增/编辑资产弹框 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitle"
            width="600px"
            top='10vh'
            v-if="dialogBaseInfo"
            :visible.sync="dialogBaseInfo"
            @close="closeStationInfo"
            v-dialogDrag>
            <fire-station-info :oldInfo="stationInfo" :closeFun="closeStationInfo"></fire-station-info>
        </el-dialog>
    </div>
</template>
<script>
import { getFireHouse, deleteFireHouse } from '@/api/sysConfig'
import FireStationInfo from './Dialog/FireStationInfo'

export default {
    name: 'FireStationManage',
    components: {
        FireStationInfo
    },
    data() {
        return {
            loading: true,
            searchForm: {
                name: ''
            },
            tableData: [],
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // 弹框信息
            dialogTitle: '',
            dialogBaseInfo: false,
            stationInfo: {},
        }
    },
    created() {
        let that = this
        that.getTableData()
    },
    methods: {
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            let parames = {
                orgIds: that.$store.state.userinfo.organizationIds,
                name: that.searchForm.name,
                pageSize: that.pageSize,
                pageIndex: that.currentPage - 1
            }
            // 获取列表信息
            getFireHouse(parames).then(res => {
                that.tableData = res.data
                that.total = res.total
                that.loading = false
            })
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        // 新增
        addFireStation() {
            let that = this
            that.dialogTitle = '新增消防站'
            that.stationInfo = {}
            that.dialogBaseInfo = true
        },
        // 编辑
        editFireStation(row) {
            let that = this
            that.dialogTitle = '编辑消防站'
            that.stationInfo = row
            that.dialogBaseInfo = true
        },
        // 删除
        deleteFireStation(row) {
            let that = this

            that.$confirm("确定删除该消防站吗？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                roundButton: true
            }).then(() => {
                deleteFireHouse({id: row.id}).then(res => {
                    if (res.status === 200) {
                        that.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        that.getTableData()
                    } else {
                        that.$message.error(res.info);
                    }
                })
            }).catch(() => {

            })
        },
        // 关闭弹框
        closeStationInfo(flag) {
            let that = this
            that.dialogBaseInfo = false
            if(flag) {
                that.getTableData(this.stationInfo.id?'':1)
            }
        }
    }
}
</script>
